<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title> <#include "head.ftl" />
</head>
<body>
	<div class="body-box">
		<div class="rhead">
			<div class="rpos">当前位置: 分类管理</div>
			<div class="clear"></div>
		</div>
		<div class="clear"></div>
		<div style="text-align: center;margin-top:20px">
			<input type="hidden" id="catId">
			当前分类:<span id="catSelectContent"></span>
		</div>
		<div class="clear"></div>
		<div>
			<div id="add_panel" style="float:left;width:50%;">
				<fieldset>
					<legend>添加子类:</legend>
					<form id="add_form">
						<table width="100%" class="pn-ftable" cellpadding="2"
							cellspacing="1" border="0">

							<tr>
								<td width="10%" class="pn-flabel pn-flabel-h"><span
									class="pn-frequired">*</span>名称:</td>
								<td colspan="1" class="pn-fcontent"><input type="text"
									id="add_name" name="name" class="required" size="25" maxlength="150" />
								</td>
							</tr>
							<tr>
								<td width="10%" class="pn-flabel pn-flabel-h"><span
									class="pn-frequired">*</span>图标:</td>
								<td colspan="1" width="30%" class="pn-fcontent"><input
									type="text" id="add_pic" name="pic" class="required"
									style="width:250px;" /><br> <br> <img id="add_imgPrev"
									src="" class="atta thumbImage"> <input type="button"
									id="add_picFileBt" value="选择图片"></td>
							</tr>
							<tr>
								<td colspan="4" class="pn-fbutton"><input
									type="button" id="add_submitBt" value="提交" /> &nbsp; <input type="reset"
									id="add_resetBt" value="重置" /></td>
							</tr>
						</table>
					</form>
				</fieldset>
			</div>
			<div id="eidt_panel" style="display:none;float:left;width:50%;">
				<fieldset>
					<legend>编辑当前分类:</legend>
					<form id="edit_form">
						<table width="100%" class="pn-ftable" cellpadding="2"
							cellspacing="1" border="0">

							<tr>
								<td width="10%" class="pn-flabel pn-flabel-h"><span
									class="pn-frequired">*</span>名称:</td>
								<td colspan="1" class="pn-fcontent"><input type="text"
									id="edit_name" name="name" class="required" size="25" maxlength="150" />
								</td>
							</tr>
							<tr>
								<td width="10%" class="pn-flabel pn-flabel-h"><span
									class="pn-frequired">*</span>图标:</td>
								<td colspan="1" width="30%" class="pn-fcontent"><input
									type="text" id="edit_pic" name="pic" class="required"
									style="width:250px;" /><br> <br> <img id="edit_imgPrev"
									src="" class="atta thumbImage"> <input type="button"
									id="edit_picFileBt" value="选择图片"></td>
							</tr>
							<tr>
								<td colspan="4" class="pn-fbutton">
								<input type="button" id="edit_submitBt" value="提交" />
								</td>
							</tr>
						</table>
					</form>
				</fieldset>
			</div>
		</div>
	</div>
</body>
<script>
	var addOrEditDoPath = g_domain + "/category/addOrEditDo/json";
	var catData = {}; 
	
	//
	makeCategoryComboBox();
	
	$("img.atta").each(function(index, el) {
		var src = $(el).attr("src");
		if (src.indexOf("http") == -1) {
			$(el).attr("src", g_domain + src);
		}
		
	});
	
	$("[id$='_pic']").keyup(function() {
		if ($(this).val().indexOf("http") == -1) {
			var type = $(this).attr("id").replace(/_pic/, "");
			$("#" + type + "_imgPrev").attr("src", g_domain + $(this).val());
		}
	});
	
	
	$("#add_submitBt").click(function() {
		var params = $("#add_form").serialize();
		var parentCatId = $("#catId").val();
		params = params + "&category.catId=" + parentCatId;
		submit(params, parentCatId);
		// 重置表单
		$("#add_resetBt").click();
		$("#add_imgPrev").attr("src", "");
	});
	
	$("#edit_submitBt").click(function() {
		var params = $("#edit_form").serialize();
		var catId = $("#catId").val();
		var deep = catData[catId].deep;
		params = params + "&catId=" + catId; 
		submit(params, catId);
	});
	
	function submit(params, catIdForReload) {
		$.post(addOrEditDoPath, params, function (data) {
			if (data.status !== 0) {
				alert(data.message);
				return;
			} 
			alert("提交成功!");
			makeCategoryComboBox(catIdForReload);
		}, "json");
	}
	
	function makeCategoryComboBox(value) {
		$("#catSelectContent").categoryComboBox({
			type: -1,
			value: value,
			isShowId: true,
			onSelect: function(deep, category) {
				var catId = null;
				if (category) {
					catId = category.catId;
					catData[catId] = category;
				} 
				updateEditForm(catId);
			}
		});
	}
	
	function updateEditForm(catId) {
		if (!catId) {
			catId = $("#catSelectContent").find("select option:selected[value!='']:last").val();
		}
		if (catId) {
			var editCat = catData[catId];
			if (!editCat) {
				return;
			}
			
			$("#eidt_panel").show();
			$("#catId").val(catId);
		
			// 刷新编辑内容
			$("#edit_name").val(editCat.name);
			if (!editCat.pic) {
				editCat.pic = "";
			}
			$("#edit_pic").val(editCat.pic);
			$("#edit_imgPrev").attr("src", g_domain + editCat.pic);
		} else {
			$("#eidt_panel").hide();
			$("#catId").val("");
		}
	}
	
	
	var finderForAdd = new CKFinder();
	finderForAdd.resourceType = 'Images';
	finderForAdd.selectActionData = "container";
	finderForAdd.selectActionFunction = function(fileUrl, data) {
		$("#add_pic").val(fileUrl);
		$("#add_imgPrev").attr("src",g_domain + fileUrl);
		
	};
	var finderForEdit = new CKFinder();
	finderForEdit.resourceType = 'Images';
	finderForEdit.selectActionData = "container";
	finderForEdit.selectActionFunction = function(fileUrl, data) {
		$("#edit_pic").val(fileUrl);
		$("#edit_imgPrev").attr("src",g_domain + fileUrl);
		
	};
	
	// 选择图片
	$("#add_picFileBt").click(function() {
		finderForAdd.popup();
	});
	// 选择图片
	$("#edit_picFileBt").click(function() {
		finderForEdit.popup();
	});
</script>
</html>